<template>
<div class="flex flex-column container">
  <page-header :banner.sync="banner"/>
  <div class="flex-1">
    <slot />
  </div>
  <page-footer />
</div>
</template>

<script>
import PageHeader from './PageHeader'
import PageFooter from './PageFooter'
export default {
  name: 'AppFramework',
  components: {PageFooter, PageHeader},
  props: {
    banner: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {}
  },
  created() {

  },
  methods: {
  }
}
</script>

<style scoped lang="scss">
.container{
  min-height: 100vh;
  align-items: stretch;
}
</style>
